{% extends "administrative/base.html" %}

{% block page_link %}
    <script src="../../static/administrative/js/view_examine.js"></script>
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }
        th:first-child{
            z-index:2;
        }
        .basic-tabs {
            box-shadow: 0 1.5px 0 0 #1E90FF;
            color: #1E90FF;
        }
        .basic {
            width: 8%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
        }
        .input-style {
            display: inline-block;
            width: 73%;
            height: 35px;
            border-radius: 7px;
            font-size: 14px;
            padding-left: 1%;
            border: #cfcfcf solid 1px;
            margin-left: 1%;
        }
        .textarea-style {
            display: inline-block;
            width: 73%;
            border-radius: 7px;
            font-size: 14px;
            padding-left: 1%;
            border: #cfcfcf solid 1px;
            margin-left: 1%;
        }
        .halving_line {
            width: 80%;
            border: #cfcfcf solid 0.5px;
            margin-left: 2%;
        }
        .label_tag {
            width: 100px;
            text-align: right;
            vertical-align: top;
            font-size: 14px;
            line-height: 35px;
        }
        .add-station {
            width: 60%;
            height: 35px;
            background: #0070c1;
            border-color: #c5dbec;
            color: #ffffff;
        }
        .model_li {
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
        .input-style {
            display: inline-block;
            width: 100%;
            height: 35px;
            font-size: 14px;
            border: none;
            background: #e8edf4;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="#" style="color: #0b0b0b;">
                <i class="iconfont icon-wodeshenqing"></i>
                <span> 我的申请</span><span> > </span><span> 详情</span>
            </a>
        </div>
    </div>


    <div style="width: 100%;height: 40px;padding-left: 3%;box-shadow: 0 1px 0 0 #CFCFCF;">

        <div id="create-menu" class="basic basic-tabs" onclick="Control_navigation(this.id)">
            申请详情
        </div>

        <div id="flow-status" class="basic" onclick="Control_navigation(this.id)">
            流程状态
        </div>
    </div>


    <!-- 表单 -->
    <div id="menu_from" style="width: 100%;height: 87%;">
        <div style="width: 75%;height: 100%;margin-top: 0.2%;color: #2C3E50;display: inline-block;vertical-align: top;background: white;">

            <div style="width: 100%;height: 90%;display: inline-block;vertical-align: center;position: relative;overflow: auto;">

                <div id="print_div" style="width: 100%;height: 100%;"><!--startprint-->
                    <h3 id="form_name" style="text-align: center;font-size: 20px;margin-top: 1%;">公务用车使用审批单</h3>

                    <div style="width: 95%;margin-left: 2.5%;margin-top: 1%;">
                        <table style="width: 100%;table-layout: fixed">
                            <tr style="margin-left: 1%;">
                                <td style="width: 100%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;background: #dfdfdf;border-bottom: none;">基本信息</td>
                            </tr>
                        </table>
                    </div>

                    <div style="width: 95%;margin-left: 2.5%;">
                        <table style="width: 100%;table-layout: fixed">
                            <tr style="margin-left: 1%;">
                                <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                    申请人：
                                </td>
                                <td id="applicat" style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;">{{ car_apply.applicat }}</td>

                                <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                    申请部门：
                                </td>
                                <td id="department" style="width: 30%;border: #cfcfcf solid 0.5px;padding-left: 1%;line-height: 35px;">{{ car_apply.department }}</td>
                            </tr>

                            <tr style="margin-left: 1%;">
                                <td style="width: 15%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;border-bottom: none">
                                    用车责任人：
                                </td>
                                <td style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-bottom: none">
                                    {{ car_apply.proposer }}
                                </td>

                                <td style="width: 12%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;border-bottom: none">
                                    申请日期：
                                </td>
                                <td id="now_time"
                                    style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-bottom: none">{{ car_apply.create_time }}</td>
                            </tr>
                        </table>
                    </div>

                    <div style="width: 95%;margin-left: 2.5%;">
                        <table style="width: 100%;table-layout: fixed">
                            <tr style="margin-left: 1%;">
                                <td style="width: 100%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;background: #dfdfdf;border-bottom: none;">申请详情</td>
                            </tr>
                        </table>
                    </div>

                    <div style="width: 95%;margin-left: 2.5%;">
                        <table style="width: 100%;table-layout: fixed">
                            <tr style="margin-left: 1%;">
                                <td style="width: 10.5%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    用车时间：
                                </td>
                                <td id="lord_send_unit" style="width: 20.5%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                    {{ car_apply.start_time }}
                                </td>
                                <td style="width: 31%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                    {{ car_apply.end_time }}
                                </td>
                            </tr>
                        </table>


                        <table style="width: 100%;table-layout: fixed">
                            <tr style="margin-left: 1%;">
                                <td style="width: 15.2%;height: 35px;line-height: 35px;text-align: right;border: #cfcfcf solid 0.5px;border-top: none;">
                                    行程路线：
                                </td>
                                <td id="itinerary" style="width: 29.8%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-top: none;border-left: none;">{{ car_apply.itinerary }}</td>

                                <td style="width: 15%;text-align: right;height: 35px;line-height: 35px;border: #cfcfcf solid 0.5px;border-top: none;border-left: none;">
                                    行驶里程：
                                </td>
                                <td id="travlled_distance" style="width: 30%;padding-left: 1%;line-height: 35px;border: #cfcfcf solid 0.5px;border-top: none;border-left: none;">{{ car_apply.travlled_distance }}</td>
                            </tr>
                        </table>

                        <table style="width: 100%;table-layout: fixed">
                            <tr style="margin-left: 1%;">
                                <td style="width: 13.4%;height: 35px;line-height: 35px;text-align: right;border: #cfcfcf solid 0.5px;border-top: none;">
                                    同行人员：
                                </td>
                                <td id="field" style="width: 66%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-top: none;border-left: none;">{{ car_apply.field_people }}</td>
                            </tr>
                        </table>

                        <table style="width: 100%;table-layout: fixed">
                            <tr style="margin-left: 1%;">
                                <td style="width: 13.4%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;border-top: none">
                                    用车事由：
                                </td>
                                <td id="car_marks" style="width: 66%;border: #cfcfcf solid 0.5px;border-top: none;border-left: none;height: 35px;line-height: 35px;padding-left: 1%;">{{ car_apply.marks }}</td>
                            </tr>
                        </table>
                    </div>

                    <div id="approval_opinion" style="width: 95%;margin-left: 2.5%;">
                        <table style="width: 100%;table-layout: fixed">
                            <tr style="margin-left: 1%;">
                                <td style="width: 100%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;background: #dfdfdf;border-bottom: none;border-top: none;">审批意见</td>
                            </tr>
                        </table>
                    </div>

                    <div id="leader_opinion" style="width: 95%;margin-left: 2.5%;">
                        <table id="kongzhuren" style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                    拟派车辆：
                                </td>
                                <td id="car_drive_num" style="width: 30%;border: #cfcfcf solid 0.5px;padding-left: 0.5%;">
                                    {{ car_apply.car_num }}
                                </td>

                                <td style="width: 15%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                    司机姓名：
                                </td>
                                <td id="car_drive" style="width: 30%;border: #cfcfcf solid 0.5px;padding-left: 1%;line-height: 35px;">
                                    {{ car_apply.driver_name }}
                                </td>
                            </tr>
                        </table>

                        <table id="zhouyuanzhnag" style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 13.58%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 100px;text-align: right;border-top: none">
                                    党政办主任：
                                </td>
                                <td style="width: 68%;border: #cfcfcf solid 0.5px;border-top: none;border-left: none;height: 100px;line-height: 100px;padding-left: 1%;padding-right: 1%;">
                                    <div id="electronic_signature" style="width: 100%;height: 100%;display: none;">
                                        <div id="signature_div" style="width: 100%;padding-left: 2%;">
                                            <div><img id="signature" style="width: 200px;height: 80px;" src="" alt=""><span style="vertical-align: bottom;margin-left: 3%;"></span></div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr style="margin-left: 1%;">
                                <td style="width: 13.58%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 100px;text-align: right;border-top: none">
                                    分管领导意见：
                                </td>
                                <td style="width: 68%;border: #cfcfcf solid 0.5px;border-top: none;border-left: none;height: 100px;line-height: 100px;padding-left: 1%;padding-right: 1%;">
                                    <div id="electronic_signature_1" style="width: 100%;height: 100%;display: none;">
                                        <div id="signature_div_1" style="width: 100%;padding-left: 2%">
                                            <div><img id="signature_1" style="width: 200px;height: 80px;" src="" alt=""><span style="vertical-align: bottom;margin-left: 3%;"></span></div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--endprint-->
                </div>

                <div style="width: 180px;height: 180px;position: absolute;z-index: 999;top: 5%;right: 5%;">
                    <img src="../../static/announcements/imgs/{{ car_apply.img_name }}" alt="" style="width: 180px;height: 180px;">
                </div>

                <div style="height: 50px;">

                </div>
            </div>
            <hr>
            <iframe id="iframe1" style="display: none"></iframe>
            <div style="width: 100%;text-align: center;margin-top: 1%;">
                <button onclick="but_click()" style="width: 7%;border-radius: 3px;border: #efefef solid 0.5px;background: #efefef;color: #2C3E50;">打印</button>
            </div>
        </div>

        <div style="width: 23%;height: 100%;display: inline-block;vertical-align: top;background: white;margin-top: 0.2%;">
            <div style="width: 100%;text-align: center;margin-top: 4%;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i class="iconfont icon-kaishi"></i>开始</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button id="kong" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">党政办主任 (孔智慧)</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button id="zhou" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">分管领导 (周剑)</button></div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i class="iconfont icon-jieshu"></i>结束</button></div>
        </div>
    </div>

    <!-- 流程状态 -->
    <div id="process_status" style="width: 100%;height: 88%;display: none;margin-top: 0.2%;">
        <div style="height: 88%;width: 100%;overflow: auto;">
            <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;">
                <thead>
                <tr>
                    <th scope="col" style="width: 8%;">序号</th>
                    <th scope="col" style="width: 8%;">节点</th>
                    <th scope="col" style="width: 8%;">操作状态</th>
                    <th scope="col" style="width: 8%;">意见</th>
                </tr>
                </thead>
                <tbody style="overflow: auto;" id="t_table1"></tbody>
            </table>
        </div>
    </div>


{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script type="text/javascript" src="../../static/public_file/js/GooFunc.js"></script>
    <script type="text/javascript" src="../../static/public_file/js/json2.js"></script>
    <script type="text/javascript" src="../../static/public_file/GooFlow/codebase/GooFlow.js"></script>
    <script type="text/javascript">
        document.getElementById("administrative").className = "add-nav-active";
        document.getElementById("my-application").className = "add_class";
        document.getElementById("gebruikersrol_ul").style.display = "inline-block";
        document.getElementById("jiantou1").className = "iconfont icon-jiantou-xia";
        document.getElementById("organizational_management_ul").style.display = "none";
        var finished = "{{ finished | safe }}";
        console.log(finished);
        if (finished){
            document.getElementById("my-application").removeAttribute("class");
            document.getElementById("my_to_do").className = "add_class";
        }

        var node = "{{ node | safe }}";
        var present = {{ present | safe }};
        if (present["孔智慧"][present["孔智慧"].length-1]["status"] === "同意") {
            document.getElementById("electronic_signature").style.display = "block";
            document.getElementById("signature").setAttribute("src", present["孔智慧"][present["孔智慧"].length-1]["img_signature"])
        }
        if (present["周剑"][present["周剑"].length-1]["status"] === "同意") {
            document.getElementById("electronic_signature_1").style.display = "block";
            document.getElementById("signature_1").setAttribute("src", present["周剑"][present["周剑"].length-1]["img_signature"])
        }

        if (node === "孔智慧"){
            document.getElementById("kong").style.color = "#007bff";
        }else if (node === "周剑") {
            document.getElementById("zhou").style.color = "#007bff";
        }



        var t_table1 = document.getElementById("t_table1");
        var number = 0;
        for (var j = 0; j < Object.keys(present).length; j++) {
            var key = Object.keys(present)[j];

            for (var TT=0; TT<present[key].length; TT++){
                number += 1
                var tr = document.createElement("tr");var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");
                td.innerHTML = number;td.style.textAlign = "center";
                td1.innerHTML = key;td1.style.textAlign = "center";
                td2.innerHTML = present[key][TT]["status"];td2.style.textAlign = "center";
                td3.innerHTML = JSON.stringify(present[key][TT]["opinion"]);td3.style.paddingLeft = "1%";
                tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);
                t_table1.appendChild(tr);
            }
        }

        function but_click() {
             bdhtml=document.getElementById("print_div").innerHTML;
             sprnstr="<!--startprint-->";   //开始打印标识字符串有17个字符
             eprnstr="<!--endprint-->";        //结束打印标识字符串
             prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
             prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//截取开始标识和结束标识之间的内容
             var iframe = null;
             iframe = document.getElementById("iframe1");

             var htmlToPrint = '' +
            '<style type="text/css">' +
                'table {'+
                    'border-collapse:collapse;' +
                '}' +
                'table td{'+
                    'border-top: 1px solid red;'+
                    'border-left: 1px solid red;'+
                    'border-bottom: 1px solid red;'+
                    'border-right: 1px solid red;'+
                    'border-collapse: separate;'+
                '}'+
            '</style>';
             htmlToPrint += prnhtml;
             var iwindow = null;
             var iwindow = iframe.contentWindow;//获取iframe的window对象
             iwindow.document.close();
             iwindow.document.write(htmlToPrint);
             iwindow.print(); //调用浏览器的打印功能打印指定区域
         }

        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }
    </script>
{% endblock %}
